<template>
    <AppPageContent :opApi="examApi" ref="refPageContent">
        <template v-slot="{ item }">
            <div class="box p-2">
                <div class="">
                    <AppImg :src="item.cover" style="border-radius: 5px;"></AppImg>
                </div>

                <h5 class="text-lg fw-bold mb-2 mt-4 chover">

                    {{ item.title }}

                </h5>
                <p class="text-sm">{{ item.intro }}</p>
                <div class="flex justify-between items-center mt-2 mb-4">
                    <div>
                        100%参加
                    </div>
                    <button class="btn-enter" @click="$router.push('/exam/exam-detail?id=' + item.id

                    )">查看详细</button>
                </div>

            </div>
        </template>
    </AppPageContent>
    <AppDialogForm title="添加考试" ref="refDialog" @save="addExam">
        <div class="form-group">
            <label class="form-control-label">考试名称</label>
            <input type="text" v-model="formData.title" class="form-control" placeholder="考试考试名称">
        </div>
        <div class="form-group">
            <label class="form-control-label">考试说明</label>
            <textarea rows="5" v-model="formData.intro" class="form-control" placeholder="考试说明"></textarea>
        </div>
        <div class="form-group">
            <label class="form-control-label">考试开始时间</label>
            <input type="text" v-model="formData.startAt" class="form-control" placeholder="考试开始时间">
        </div>
        <div class="form-group">
            <label class="form-control-label">考试截止时间</label>
            <input type="text" v-model="formData.endAt" class="form-control" placeholder="考试截止时间">
        </div>
        <div class="form-group">
            <label class="form-control-label">选择试卷</label>
            <div class="flex items-center">
                <input v-model="exam.name" type="text" placeholder="请输入试卷名称" class="form-control mr-4"
                    style="width:300px;">
                <button type="button" class="btn-primary" @click.stop.prevent="findPaper">搜索</button>
            </div>
            <table class="table table-nowrap mb-0">
                <thead>
                    <tr>
                        <th>选中</th>
                        <th>课程名称</th>
                        <th>试卷名称</th>
                        <th class="text-center">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in exam.list" :key="index">
                        <td>
                            <input type="radio" name="paperID" @click="formData.paperID = item.id" :value="item.id">
                        </td>
                        <td>
                            {{ item.title + item.subject.title }}
                        </td>
                        <!-- <td>课程1的介绍</td>
                        <td>3-4</td>
                        <td class="text-center">
                            <span @click="selectedPaperId = item.id"
                                :class="{ 'text-primary': selectedPaperId == item.id }">选中</span>
                            <span>重考</span>
                        </td> -->
                    </tr>
                </tbody>
            </table>
        </div>
    </AppDialogForm>
</template>
<script setup>
import examApi from '@/api/examApi.js'
import paperApi from '@/api/paperApi.js'
import bus from '@/utils/bus'
import { useRoute } from 'vue-router';
const route = useRoute()
const classID = route.query.id
const refDialog = ref(null)
const openDialog = () => {
    refDialog.value.open()
}
const refPageContent = ref(null)
const exam = reactive({
    name: '',
    list: [],
})
// 启用监听
bus.on('open-exam', openDialog);
const formData = reactive({
    title: '模拟测试01',
    paperID: '',
    classID: classID * 1,
    intro: '随堂模拟测试',
    startAt: '2024-08-28 15:04:05',
    endAt: '2024-09-08 15:04:05',
    duration: 90,
    state: true
})
// 在组件卸载之前移除监听
onBeforeUnmount(() => {
    bus.off('open-exam', openDialog);
})
// 获取试卷
const findPaper = async () => {
    // 
    const data = await paperApi.getList({ keyword: exam.name })
    exam.list = data.list
    exam.selected = data.list.map(item => false)
}

// 添加试卷成功之后，重新刷新
const addExam = () => {
    examApi.add(formData).then(res => {
        refDialog.value.close()
        refPageContent.value.search()
    })
}
</script>